<template>
  <div>
    <search-control :searh-bar="searhBar" @search="search" />
    <el-card style="margin: 20px">
      <el-header style="font-size: 12px; padding:0" class="father">
        <div class="left">
          <el-button
            type="success"
            round
            @click="$router.push(`/info/area/addarea/null`)"
          >新增库区</el-button>
        </div>
        <div class="right">
          <el-button
            round
            @click="exportExcel"
          >下载库区模板</el-button>
          <el-button
            round
            @click="visible=true"
          >导入库区信息</el-button>
        </div>
      </el-header>
      <el-table
        :data="list"
        stripe
        style="width: 70vw"
        :header-cell-style="{background:'#f9f6ee','text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        border
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          prop="warehouseName"
          label="所属仓库"
        />
        <el-table-column
          prop="code"
          label="库区编号"
        />
        <el-table-column
          prop="name"
          label="库区名称"
        />
        <el-table-column
          prop="temperatureType"
          label="温度类型"
          :formatter="formatterTem"
        />
        <el-table-column
          prop="bearingType"
          label="承重类型"
          :formatter="formatterBer"
        />
        <el-table-column
          prop="useType"
          label="用途属性"
          :formatter="formatterUse"
        />
        <el-table-column
          prop="status"
          label="库区状态"
          :formatter="formatterSta"
        />
        <el-table-column
          prop="personName"
          label="负责人"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
        />
        <el-table-column
          prop="includedNum"
          label="库位数量"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
        />
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/info/area/addarea/${row.id}`)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="statusBtn(row.id,row.status,row.name)"
            >{{ row.status|replacevalue }}</el-button>
            <el-button type="text" size="small" @click="delArea(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle">
        <el-pagination
          :current-page="pageConfig.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageConfig.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <upload-area :visible="visible" @cancelBtn="cancelBtn" />
      <el-dialog
        :title="text"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span>确认要{{ text }}库区：{{ name }}吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Okbtn">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
import SearchControl from '@/components/SearchControl'
import { areaDetailPage, updataAreaList } from '@/api/area'
import areaEnum from '@/constant/informationEnum.js'
import UploadArea from '@/views/information/components/upload-area.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: { SearchControl, UploadArea },
  filters: {
    replacevalue(oldvalue) {
      if (oldvalue === 0) {
        return '启用'
      } else {
        return '停用'
      }
    }
  },
  data() {
    return {
      visible: false,
      dialogVisible: false,
      searhBar: [
        { type: 'input', name: '仓库名称', value: '' },
        { type: 'input', name: '库区名称', value: '' },
        { type: 'selete', name: '仓库状态', seleteType: 'warehouse', value: '' }
      ],
      total: 0,
      // 每页数据
      pageConfig: {
        current: 1, // 当前页
        size: 10
      },
      list: [],
      name: '',
      status: '',
      id: '',
      text: ''
    }
  },
  computed: {
    listSlice() {
      return this.list.slice((this.pageConfig.current - 1) * this.pageConfig.size, this.pageConfig.current * this.pageConfig.size)
    }
  },
  async created() {
    this.renderAreaList()
  },
  methods: {
    // 分页器
    handleSizeChange(newSize) {
      this.pageConfig.size = newSize
      this.renderAreaList()
    },
    handleCurrentChange(newPage) {
      this.pageConfig.current = newPage
      this.renderAreaList()
    },
    // 列表渲染
    async renderAreaList(searchquery = '') {
      const areaList = await areaDetailPage(this.pageConfig, searchquery)
      console.log(222, areaList)
      const { records, total } = areaList.data.data
      this.total = +total
      this.list = records
    },
    // 改值
    changevalue(name, value) {
      const index = this.searhBar.findIndex(item => item.name === name)
      this.searhBar[index].value = value
    },
    // 重置
    resetvalue() {
      this.searhBar.forEach(item => {
        item.value = ''
      })
    },
    // 搜索 点击搜素按钮获取表单组件的值
    search() {
      console.log(36, this.searhBar)
      const arr = this.searhBar.map(item => item.value)
      this.renderAreaList(arr)
    },
    // 文本过滤
    formatterTem(row, col, val) {
      const res = areaEnum.temperatureType.find(item => item.type === val)
      return res ? res.value : '未知'
    },
    formatterBer(row, col, val) {
      const res = areaEnum.bearingType.find(item => item.type === val)
      return res ? res.value : '未知'
    },
    formatterUse(row, col, val) {
      const res = areaEnum.useType.find(item => item.type === val)
      return res ? res.value : '未知'
    },
    formatterSta(row, col, val) {
      const res = areaEnum.status.find(item => item.code === val)
      return res ? res.value : '未知'
    },
    // 停/启用按钮
    async statusBtn(id, status, name) {
      this.dialogVisible = true
      this.id = id
      this.status = status
      this.name = name
      this.text = this.status === 1 ? '确认停用' : '确认启用'
    },
    // dialog 确定按钮
    async Okbtn() {
      const num = this.status === 1 ? 0 : 1
      const obj = { id: this.id, status: num }
      await updataAreaList(obj)
      this.renderAreaList()
      this.dialogVisible = false
    },
    // 删除按钮
    async delArea(id) {
      await this.$confirm('接口错误！')
      // const res = await deleteAreaList(id)
      // console.log(res)
      // this.$message.success('删除成功！')
    },
    cancelBtn() {
      // console.log(this.visible)
      this.visible = false
    },
    async exportExcel() {
      // 转成 excel 文件供用户下载
      export_json_to_excel({
        header: ['所属仓库名称', '库区名称', '温度类型', '承重类型', '库区类型', '用途属性', '库区状态', '负责人', '联系电话'],
        data: [
          ['1号仓库', '一只猪', '常温', '轻型货架', '入库缓存区', '入库缓存区', '可用', '两只猪', 12331212222]
        ]
      })
    }
  },
  provide() {
    return {
      searhBar: this.searhBar,
      changevalue: this.changevalue,
      resetvalue: this.resetvalue
    }
  }
}

</script>
<style scoped lang="scss">
.father{
    display: flex;
    justify-content: space-between;
    .left{
    margin-left: 5px;
}
    .right{
    margin-right:5px;
}
}

</style>
